var util = require('../../utils/util.js');

Page({
  /**
   * 页面的初始数据
   */
  data: {
    path: [
      {
        x: 1, //月份
        y: 0 //金额  单位(万)
      },
      {
        x: 2,
        y: 0
      },
      {
        x: 3,
        y: 0
      },
      {
        x: 4,
        y: 0
      },
      {
        x: 5,
        y: 0
      },
      {
        x: 6,
        y: 0
      }
    ],
  },
  onLoad: function () {
    this.setChart();
  },
  // 走势图
  setChart: function () {
    var path = this.data.path;
    const ctx = wx.createCanvasContext('myCanvas');
    ctx.setFontSize(11);
    ctx.fillText('金额 (元)', 70, 55);
    ctx.fillText('1500万', 10, 72);
    ctx.fillText('1000万', 10, 117);
    ctx.fillText('500万', 18, 162);
    ctx.fillText('达标线', 16, 175);
    ctx.fillText('(300万)', 16, 188);
    ctx.fillText('月份', 275, 195);

    ctx.fillText(path[0].x, 80, 220);
    ctx.fillText(path[1].x, 110, 220);
    ctx.fillText(path[2].x, 140, 220);
    ctx.fillText(path[3].x, 170, 220);
    ctx.fillText(path[4].x, 200, 220);
    ctx.fillText(path[5].x, 230, 220);
    // 达标线
    ctx.setStrokeStyle('red');
    ctx.beginPath();
    ctx.moveTo(60, 175);
    ctx.lineTo(290, 175);
    ctx.stroke();
    ctx.setStrokeStyle('#000000');
    ctx.beginPath();
    ctx.moveTo(60, 50);
    ctx.lineTo(60, 202);
    ctx.lineTo(300, 202);
    ctx.stroke();
    // 根据数据画路线
    ctx.setStrokeStyle('#109FFC');
    ctx.beginPath();  // 开始一个路径
    path[0].x = 82;
    if (path[0].y >= 1500) {
      path[0].y = 1500;
    }
    var y = 202 - path[0].y / 100 * 9;
    ctx.moveTo(path[0].x, y);  // 画第一个点
    for (var i = 1; i < path.length; i++) {
      if (path[i].y >= 1500) {
        path[i].y = 1500;
      }
      path[i].x = 82 + 30 * i;
      path[i].y = 202 - path[i].y / 100 * 9;
      ctx.lineTo(path[i].x, path[i].y); // 利用for循环画路径
    }
    // 画完之后 创建路径
    ctx.stroke(); 
    ctx.draw();
  }
})